<template>
	<el-dialog v-model="visible" :title="dataForm.titleval" :close-on-click-modal="false" draggable style="width: 100%; height: 1200px">
		<el-button type="primary" class="btnbutton" style="margin-bottom: 20px" @click="handlePrintJs">打印</el-button>
		<el-card id="printTest">
			<el-form ref="patientFormRef" :model="patientForm">
				<div class="divtext" style="width: 100%; height: 30px; float: left; padding-left: 10px; font-weight: bold">患者信息</div>
				<div class="divhr" style="width: 99%; border-bottom: 1px solid #409eff; height: 0.5px; float: left"></div>
				<div class="divline" style="width: 96%; height: 30px; float: left; margin-top: 20px">
					<el-form-item prop="username" class="divlineleft" style="width: 30%; float: left; height: 30px; padding-left: 10px" label="姓名：">
						<span class="spantext">{{ patientForm.userName }}</span>
					</el-form-item>
					<el-form-item prop="usersex" class="divlineleft" style="width: 30%; float: left; height: 30px; padding-left: 10px" label="性别：">
						<span class="spantext">{{ patientForm.userSex }}</span>
					</el-form-item>
					<el-form-item prop="userbirthday" class="divlineleft" style="width: 30%; float: left; height: 30px; padding-left: 10px" label="出生日期：">
						<span class="spantext">{{ patientForm.userBirthday }}</span>
					</el-form-item>
				</div>
				<div class="divline" style="width: 96%; height: 30px; float: left; margin-top: 20px">
					<el-form-item prop="userage" class="divlineleft" style="width: 30%; float: left; height: 30px; padding-left: 10px" label="年龄：">
						<span class="spantext">{{ patientForm.userAge }}</span>
					</el-form-item>
					<el-form-item prop="usercard" class="divlineleft" style="width: 30%; float: left; height: 30px; padding-left: 10px" label="身份证号：">
						<span class="spantext">{{ patientForm.userCard }}</span>
					</el-form-item>
					<el-form-item prop="socialnum" class="divlineleft" style="width: 30%; float: left; height: 30px; padding-left: 10px" label="社保卡号：">
						<span class="spantext">{{ patientForm.socialNum }}</span>
					</el-form-item>
				</div>
				<div class="divline" style="width: 96%; height: 30px; float: left; margin-top: 20px">
					<el-form-item prop="patienttype" class="divlineleft" style="width: 30%; float: left; height: 30px; padding-left: 10px" label="患者类型：">
						<span class="spantext">{{ patientForm.patientType }}</span>
					</el-form-item>
					<el-form-item prop="visitnum" class="divlineleft" style="width: 30%; float: left; height: 30px; padding-left: 10px" label="就诊卡号：">
						<span class="spantext">{{ patientForm.visitNum }}</span>
					</el-form-item>
					<el-form-item prop="usertel" class="divlineleft" style="width: 30%; float: left; height: 30px; padding-left: 10px" label="联系电话：">
						<span class="spantext">{{ patientForm.userTel }}</span>
					</el-form-item>
				</div>
				<div class="divline" style="width: 96%; height: 30px; float: left; margin-top: 20px">
					<el-form-item prop="useraddr" class="divlinecol" style="width:90%; float: left; height: 30px; padding-left: 10px" label="详细地址：">
						<span class="spantext">{{ patientForm.userAddr }}</span>
					</el-form-item>
				</div>
				<div class="divlinespac" style="width: 96%; height: 30px; float: left"></div>
				<div class="divtext" style="width: 100%; height: 30px; float: left; padding-left: 10px; font-weight: bold">挂号信息</div>
				<div class="divhr" style="width: 99%; border-bottom: 1px solid #409eff; height: 0.5px; float: left"></div>
				<div class="divline" style="width: 96%; height: 30px; float: left; margin-top: 20px">
					<el-form-item prop="registerdept" class="divlineleft" style="width: 30%; float: left; height: 30px; padding-left: 10px" label="挂号科室：">
						<span class="spantext">{{ patientForm.registerDept }}</span>
					</el-form-item>
					<el-form-item
						prop="outpatienttype"
						class="divlineleft"
						style="width: 30%; float: left; height: 30px; padding-left: 10px"
						label="门诊类型："
					>
						<span class="spantext">{{ patientForm.outpatientType }}</span>
					</el-form-item>
					<el-form-item prop="seedoctor" class="divlineleft" label="接诊医生：">
						<span class="spantext">{{ patientForm.seeDoctor }}</span>
					</el-form-item>
				</div>
				<div class="divline" style="width: 96%; height: 30px; float: left; margin-top: 20px">
					<el-form-item prop="costmoney" class="divlineleft" style="width: 30%; float: left; height: 30px; padding-left: 10px" label="挂号费：">
						<span class="spantext">{{ patientForm.costMoney }}</span>
					</el-form-item>
					<el-form-item prop="viewstate" class="divlineleft" style="width: 30%; float: left; height: 30px; padding-left: 10px" label="就诊状态：">
						<span class="spantext">{{ patientForm.viewState }}</span>
					</el-form-item>
					<el-form-item prop="startcase" class="divlinecolt" style="width: 71%; float: left; height: 30px; padding-left: 10px" label="初步诊断：">
						<span class="spantext">{{ patientForm.startCase }}</span>
					</el-form-item>
				</div>
			</el-form>
			<div class="divtexttb" style="width: 100%; height: 30px; float: left; padding-left: 10px; font-weight: bold; margin-top: 50px">诊断记录</div>
			<div class="divhr" style="width: 99%; border-bottom: 1px solid #409eff; height: 0.5px; float: left"></div>
			<div style="width:99%;height: auto;float: left;margin-top: 10px;" v-html = "patientForm.remark">
			
			</div>
			<div class="divtexttb" style="width: 100%; height: 30px; float: left; padding-left: 10px; font-weight: bold; margin-top: 50px">药品信息</div>
			<div class="divhr" style="width: 99%; border-bottom: 1px solid #409eff; height: 0.5px; float: left"></div>
			<div>
				<table class="tb" style="width: 100%; margin-top: 50px; border: 1px solid #000000; border-collapse: collapse">
					<tbody>
						<tr>
							<td style="text-align: center; border: 1px solid #000000; border-collapse: collapse">序号</td>
							<td style="text-align: center; border: 1px solid #000000; border-collapse: collapse">药品名称</td>
							<td style="text-align: center; border: 1px solid #000000; border-collapse: collapse">药品规格</td>
							<td style="text-align: center; border: 1px solid #000000; border-collapse: collapse">数量</td>
							<td style="text-align: center; border: 1px solid #000000; border-collapse: collapse">销售价格</td>
						</tr>
						<tr v-for="(printItem, index) in state.queryForm.drugList" :key="index">
							<td style="text-align: center; border: 1px solid #000000; border-collapse: collapse">{{ index + 1 }}</td>
							<td style="text-align: center; border: 1px solid #000000; border-collapse: collapse">{{ printItem.goodName }}</td>
							<td style="text-align: center; border: 1px solid #000000; border-collapse: collapse">{{ printItem.goodSpec }}</td>
							<td style="text-align: center; border: 1px solid #000000; border-collapse: collapse">{{ printItem.goodCount }}</td>
							<td style="text-align: center; border: 1px solid #000000; border-collapse: collapse">{{ printItem.salePrice }}</td>
						</tr>
					</tbody>
				</table>
			</div>
			<div class="divtexttb" style="width: 100%; height: 30px; float: left; padding-left: 10px; font-weight: bold; margin-top: 50px">
				项目检查信息
			</div>
			<div class="divhr" style="width: 99%; border-bottom: 1px solid #409eff; height: 0.5px; float: left"></div>
			<div>
				<table class="tb" style="width: 100%; margin-top: 50px; border: 1px solid #000000; border-collapse: collapse">
					<tbody>
						<tr>
							<td style="text-align: center; border: 1px solid #000000; border-collapse: collapse">序号</td>
							<td style="text-align: center; border: 1px solid #000000; border-collapse: collapse">项目编码</td>
							<td style="text-align: center; border: 1px solid #000000; border-collapse: collapse">项目名称</td>
							<td style="text-align: center; border: 1px solid #000000; border-collapse: collapse">项目价格</td>
						</tr>
						<tr v-for="(printItem, index) in state.queryForm.projectList" :key="index">
							<td style="text-align: center; border: 1px solid #000000; border-collapse: collapse">{{ index + 1 }}</td>
							<td style="text-align: center; border: 1px solid #000000; border-collapse: collapse">{{ printItem.projectCode }}</td>
							<td style="text-align: center; border: 1px solid #000000; border-collapse: collapse">{{ printItem.projectName }}</td>
							<td style="text-align: center; border: 1px solid #000000; border-collapse: collapse">{{ printItem.projectPrice }}</td>
						</tr>
					</tbody>
				</table>
			</div>
		</el-card>
	</el-dialog>
</template>

<script setup lang="ts" name="SysPostIndex">
import { useCrud } from '@/hooks'
import { reactive, ref, getCurrentInstance } from 'vue'
import { IHooksOptions } from '@/hooks/interface'
import { usePatientDrugListApi } from '@/api/sys/patientdrug'
import { usePatientProjectListApi } from '@/api/sys/patientproject'
import printJs from 'print-js'
const visible = ref(false)
let proxy = getCurrentInstance()
const state: IHooksOptions = reactive({
	queryForm: {
		drugList: [],
		projectList: []
	}
})
const patientForm = reactive({
	id: '',
	userName: '', //姓名
	userSex: '', //性别
	userBirthday: '', //出生日期
	userAge: '', //年龄
	userCard: '', //身份证号
	socialNum: '', //社保卡号
	patientType: '', //患者类型
	visitNum: '', //就诊卡号
	userTel: '', //联系电话
	userAddr: '', //详细地址
	registerDept: '', //挂号科室
	outpatientType: '', //门诊类型
	seeDoctor: '', //接诊医生
	costMoney: '', //挂号费
	viewState: '', //就诊状态
	startCase: '', //初步诊断
	orgId: '', //组织id,
	registerId: '',
	doctorId: '',
	caseId: '',
	remark:'',
})

const dataForm = reactive({
	titleval: '诊断信息列表'
})
const handlePrintJs = () => {
	printJs({
		printable: 'printTest',
		type: 'html',
		css: ['//unpkg.com/element-plus/dist/index.css'],
		scanStyles: false
	})
}
const getPatientDrug = (currentId: any) => {
	let orgCd: any = localStorage.getItem('org')
	var param = { orgId: orgCd, patientId: currentId, page: 1, limit: 1, patientStatus: 1}
	usePatientDrugListApi(param).then(response => {
		let array: any = response.data
		state.queryForm.drugList = array
	})
}
const getPatientProject = (currentId: any) => {
	let orgCd: any = localStorage.getItem('org')
	var param = { orgId: orgCd, patientId: currentId, page: 1, limit: 1, patientStatus: 1 }
	usePatientProjectListApi(param).then(response => {
		let array: any = response.data
		console.log(response)
		state.queryForm.projectList = array
	})
}
const init = (row: any) => {
	patientForm.remark=row.remark;
	patientForm.userName = row.userName
	patientForm.userSex = row.userSex
	patientForm.userBirthday = row.userBirthday
	patientForm.userAge = row.userAge
	patientForm.userCard = row.userCard
	patientForm.socialNum = row.socialNum
	patientForm.patientType = row.patientType
	patientForm.visitNum = row.visitNum
	patientForm.userTel = row.userTel
	patientForm.userAddr = row.userAddr
	patientForm.registerDept = row.registerDept
	patientForm.outpatientType = row.outpatientType
	patientForm.seeDoctor = row.seeDoctor
	patientForm.costMoney = row.costMoney
	patientForm.viewState = row.viewState
	patientForm.startCase = row.startCase
	patientForm.orgId = row.orgId
	patientForm.registerId = row.registerId
	patientForm.doctorId = row.doctorId
	getPatientDrug(row.uid)
	getPatientProject(row.uid)
	visible.value = true
}
const { getDataList, selectionChangeHandle, sizeChangeHandle, currentChangeHandle, deleteBatchHandle } = useCrud(state)

defineExpose({
	init
})
</script>

<style lang="scss" scoped>
.divline-button-left {
	width: 100px;
	height: 30px;
	margin-left: 40%;
	float: left;
	:deep(.el-button--primary) {
		margin-top: 10px;
		width: 100px;
		height: 30px;
		font-size: 13px;
	}
}
.divline-button-right {
	width: 100px;
	height: 30px;
	float: left;
	margin-left: 20px;
	:deep(.el-button--primary) {
		margin-top: 10px;
		background-color: red;
		width: 100px;
		height: 30px;
		font-size: 13px;
		border: 0px;
	}
}
.spantext {
	width: 100%;
	height: 30px;
	float: left;
}
.tb {
	border-collapse: collapse;
}
.tb td {
	height: 25px;
}
.tb td,
.tb th {
	border: 1px solid #aaa;
}
</style>